import React from 'react'
import { connect } from 'react-redux'
import { deepCopy, messages } from "share/common"
import TagSelect from 'ant-design-pro/lib/TagSelect'
import { Form, Modal, Icon, Checkbox, List, message, Tag, Button, Spin } from 'antd'
const ListItem = List.Item;

import ListSelector from 'components/list-selector'
import workflowService from 'containers/setting/workflow/workflow.service'
import CCService from 'containers/setting/cost-center/cost-center.service'

class AddPersonModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      loadingAddPerson: false, //添加审批人员的loading
      userVisible: false,
      userGroupVisible: false,
      hasGetCostCenter: false, //是否已获取了成本中心审批者
      allApproverType: null, //审批人类型
      costCenterApprover: null, //单据上成本中心主管审批者
      costCenterDeptApprover: null, //单据上成本中心主要部门经理审批者
      depByApplicantKeys: [],
      depByDeptKeys: [],
      costCenterKeys: [],
      costCenterDeptKeys: [],
      containsApportionmentDepartmentManager: false, //分摊组织领导会签
      containsApportionmentCostCenterManager: false, //分摊成本中心经理会签
      containsApportionmentCostCenterPrimaryDepartmentManager: false, //分摊后，对应的部门经理会签
      directManager: false,
      accountBelongManager: false,//费用归属人直属领导
      participant: false,//参与人
      apiReturnApprover: false,
      approveUser: [], //指定人员审批
      approveUserGroup: [], //指定人员组审批
      defaultApproveUserOID: [], //默认审批人员OID
      defaultApproveUserGroupOID: [], //默认审批人员组OID
      approverNotChange: true, //审批人没有发生改变
      departmentByLeader: [], //按申请人所在的组织架构审批的审批人
      departmentByBill: [],  //按单据上的组织架构审批的审批人
      departmentByParticipant: [],
    }
  }

  componentDidMount() {
    this.getApproverType();
    this.setDefaultUserAndGroup(this.props.ruleApprovers || [])
  }

  componentWillReceiveProps(nextProps) {
    !this.state.hasGetCostCenter && this.getCostCenterApprover();
    this.setDefaultUserAndGroup(nextProps.ruleApprovers || []);
    this.setState({
      hasGetCostCenter: !!this.props.formInfo.customFormFields,
      depByApplicantKeys: [],
      depByDeptKeys: [],
      departmentByParticipantKeys: [],
      costCenterKeys: [],
      costCenterDeptKeys: [],
      containsApportionmentDepartmentManager: false,
      containsApportionmentCostCenterManager: false,
      containsApportionmentCostCenterPrimaryDepartmentManager: false,
      directManager: false,
      apiReturnApprover: false,
      accountBelongManager: false,
      participant: false,
    })
  }

  hasParticipant=()=>{
    //select_participant
    let flag = false;
    if(!!this.props.formInfo.customFormFields){
      this.props.formInfo.customFormFields.map(item=>{
        if(item.messageKey === 'select_participant'){
          return flag = true
        }
      })
    }
    return flag
  };

  //获取审批人类型
  getApproverType = () => {
    this.setState({ loading: true });
    workflowService.getApproverType().then(res => {
      this.setState({ allApproverType: res.data }, () => {
        let departmentByLeader = this.state.allApproverType['RuleEnumDTO(key=0, value=按申请人所在的组织架构审批, remark=)'] || [];
        let departmentByBill = this.state.allApproverType['RuleEnumDTO(key=0, value=按单据上的组织架构审批, remark=)'] || [];
        let departmentByParticipant =  this.state.allApproverType['RuleEnumDTO(key=0, value=按参与人所在的组织架构审批, remark=)'] || [];
        if (departmentByLeader.length || departmentByBill.length || departmentByParticipant.length) {
          this.getDepartmentI18N(departmentByLeader, departmentByBill, departmentByParticipant)
        } else {
          this.setState({ loading: false, departmentByLeader, departmentByBill, departmentByParticipant })
        }
      })
    }).catch(() => {
      message.error(messages('common.error1'))
    })
  };

  //获取组织架构的多语言
  getDepartmentI18N = (departmentByLeader, departmentByBill,departmentByParticipant) => {
    workflowService.getDepartmentPositionList().then(res => {
      res.data && res.data.map(item => {
        departmentByLeader.map(departmentItem => {
          if (String(departmentItem.key) === String(item.positionCode)) {
            departmentItem.value = item.positionName
            // item.i18n && item.i18n.positionName && item.i18n.positionName.map(nameItem => {
            //   nameItem.language === this.props.language.code && (departmentItem.value = nameItem.value)
            // })
          }
        });
        departmentByBill.map(departmentItem => {
          if (String(departmentItem.key) === String(item.positionCode)) {
            departmentItem.value = item.positionName
            // item.i18n && item.i18n.positionName && item.i18n.positionName.map(nameItem => {
            //   nameItem.language === this.props.language.code && (departmentItem.value = nameItem.value)
            // })
          }
        })
        departmentByParticipant.map(departmentItem => {
          if (String(departmentItem.key) === String(item.positionCode)) {
            departmentItem.value = item.positionName
            // item.i18n && item.i18n.positionName && item.i18n.positionName.map(nameItem => {
            //   nameItem.language === this.props.language.code && (departmentItem.value = nameItem.value)
            // })
          }
        })
      });
      this.setState({ loading: false, departmentByLeader, departmentByBill, departmentByParticipant })
    })
  };

  //获取单据上成本中心主管审批者
  getCostCenterApprover = () => {
    let costCenterFields = [];
    let costCenterApprover = [];
    let costCenterDeptApprover = [];
    (this.props.formInfo.customFormFields || []).map(item => {
      if (item.messageKey === 'select_cost_center')
        costCenterFields.push(item)
    });
    Promise.all(
      costCenterFields.map(item => {
        let costCenterItem = {
          code: null,
          name: null,
          key: 6002,
          remark: messages('setting.key1261'/*按单据上的成本中心经理审批*/),
          ruleApprovalNodeOID: null,
          approverEntityOID: null,
          value: item.fieldName
        };
        if (item.dataSource && JSON.parse(item.dataSource)) {
          costCenterItem.approverEntityOID = JSON.parse(item.dataSource).costCenterOID;
          if (costCenterItem.approverEntityOID) {
            return new Promise((resolve, reject) => {
              CCService.getCostCenterDetail(costCenterItem.approverEntityOID).then(res => {
                costCenterItem.value = res.data.name;
                resolve(costCenterItem)
              }).catch(e => {
                reject(e)
              })
            })
          } else {
            return costCenterItem
          }
        }
      })
    ).then(approver => {
      costCenterDeptApprover = deepCopy(approver);
      costCenterDeptApprover.map((item, index) => {
        costCenterDeptApprover[index].key = 6004;
        costCenterDeptApprover[index].remark = messages('setting.key1265'/*按单据上的成本中心的主要部门经理审批*/)
      });
      this.setState({ costCenterApprover: approver, costCenterDeptApprover })
    })
  };

  //设置默认的审批人员和人员组
  setDefaultUserAndGroup = (ruleApprovers) => {
    let approveUser = [];
    let approveUserGroup = [];
    let defaultApproveUserOID = [];
    let defaultApproveUserGroupOID = [];
    ruleApprovers.map(item => {
      if (item.approverType === 6001) {
        item.userOID = item.approverEntityOID;
        item.fullName = item.name;
        approveUser.push(item);
        defaultApproveUserOID.push(item.approverEntityOID)
      } else if (item.approverType === 6003) {
        item.userGroupOID = item.approverEntityOID;
        approveUserGroup.push(item);
        defaultApproveUserGroupOID.push(item.approverEntityOID)
      }
    });
    this.setState({ approveUser, approveUserGroup, defaultApproveUserOID, defaultApproveUserGroupOID })
  };

  //新增指定人员审批
  handleAddUser = (value) => {
    this.setState({
      userVisible: false,
      approveUser: value.result || []
    })
  };

  //删除指定人员审批
  handleDeleteUser = (userOID) => {
    let approveUser = this.state.approveUser;
    let defaultApproveUserOID = this.state.defaultApproveUserOID;
    defaultApproveUserOID.delete(userOID);
    approveUser && approveUser.map((item, index) => {
      if (item.userOID === userOID) {
        approveUser.splice(index, 1);
        item.ruleApproverOID && this.props.onDelete(item)
      }
    });
    this.setState({ approveUser, defaultApproveUserOID, approverNotChange: false })
  };

  //新增指定人员组审批
  handleAddUserGroup = (value) => {
    this.setState({
      userGroupVisible: false,
      approveUserGroup: value.result
    })
  };

  //删除指定人员组审批
  handleDeleteUserGroup = (oid) => {
    let approveUserGroup = this.state.approveUserGroup;
    let defaultApproveUserGroupOID = this.state.defaultApproveUserGroupOID;
    defaultApproveUserGroupOID.delete(oid);
    approveUserGroup && approveUserGroup.map((item, index) => {
      if (item.userGroupOID === oid) {
        approveUserGroup.splice(index, 1);
        item.ruleApproverOID && this.props.onDelete(item)
      }
    });
    this.setState({ approveUserGroup, defaultApproveUserGroupOID, approverNotChange: false })
  };

  //点击"确定"
  handleOK = () => {
    const { ruleApprovalNodeOID } = this.props;
    const {
      allApproverType, costCenterApprover, costCenterDeptApprover, depByApplicantKeys,departmentByParticipantKeys, depByDeptKeys, costCenterKeys,
      costCenterDeptKeys, directManager, accountBelongManager, participant, apiReturnApprover, containsApportionmentDepartmentManager,
      containsApportionmentCostCenterManager, containsApportionmentCostCenterPrimaryDepartmentManager,
      approveUser, approveUserGroup, defaultApproveUserOID, defaultApproveUserGroupOID
    } = this.state;
    this.setState({ loadingAddPerson: true });
    let params = [];
    depByApplicantKeys.map(key => {
      allApproverType['RuleEnumDTO(key=0, value=按申请人所在的组织架构审批, remark=)'].map(item => {
        if (item.key === key) {
          params.push({
            departmentType: 1,
            code: null,
            name: item.value,
            remark: item.remark,
            approverType: key,
            level: 1,
            ruleApprovalNodeOID
          })
        }
      })
    });
    depByDeptKeys.map(key => {
      allApproverType['RuleEnumDTO(key=0, value=按单据上的组织架构审批, remark=)'].map(item => {
        if (item.key === key) {
          params.push({
            departmentType: 2,
            code: null,
            name: item.value,
            remark: item.remark,
            approverType: key,
            level: 1,
            ruleApprovalNodeOID,
            containsApportionmentDepartmentManager
          })
        }
      })
    });
    departmentByParticipantKeys.map(key => {
      allApproverType['RuleEnumDTO(key=0, value=按参与人所在的组织架构审批, remark=)'].map(item => {
        if (item.key === key) {
          params.push({
            departmentType: 3,
            code: null,
            name: item.value,
            remark: item.remark,
            approverType: key,
            level: 1,
            ruleApprovalNodeOID,
            containsApportionmentDepartmentManager
          })
        }
      });
    });
    costCenterKeys.map(oid => {
      costCenterApprover.map(item => {
        if (item.approverEntityOID === oid) {
          params.push({
            code: item.code,
            remark: item.remark,
            name: item.value,
            approverType: 6002,
            approverEntityOID: oid,
            ruleApprovalNodeOID,
            containsApportionmentCostCenterManager
          })
        }
      })
    });
    costCenterDeptKeys.map(oid => {
      costCenterDeptApprover.map(item => {
        if (item.approverEntityOID === oid) {
          params.push({
            code: item.code,
            remark: item.remark,
            name: item.value,
            approverType: 6004,
            approverEntityOID: oid,
            ruleApprovalNodeOID,
            level: 1,
            containsApportionmentCostCenterPrimaryDepartmentManager
          })
        }
      })
    });
    directManager && params.push({
      approverType: 6100,
      ruleApprovalNodeOID,
      departmentType: null,
      name: messages('setting.key1269'/*直属领导*/),
      level: 1,
    });
    accountBelongManager && params.push({
      approverType: 6300,
      ruleApprovalNodeOID,
      departmentType: null,
      name: messages('setting.key1269')/*直属领导*/,
      level: 1,
    });
    participant &&  params.push({
      approverType: 6400,
      ruleApprovalNodeOID,
      departmentType: null,
      name: messages('setting.key1269'/*直属领导*/),
      level: 1,
    });
    apiReturnApprover && params.push({
      approverType: 1004,
      ruleApprovalNodeOID,
      name: messages('setting.key1651')/*外部接口*/
    });
    approveUser && approveUser.map(item => {
      let itemHasExist = false;
      defaultApproveUserOID.map(oid => {
        item.userOID === oid && (itemHasExist = true)
      });
      !itemHasExist && params.push({
        approverType: 6001,
        ruleApprovalNodeOID,
        name: item.fullName,
        approverEntityOID: item.userOID
      })
    });
    approveUserGroup && approveUserGroup.map(item => {
      let itemHasExist = false;
      defaultApproveUserGroupOID.map(oid => {
        item.userGroupOID === oid && (itemHasExist = true)
      });
      !itemHasExist && params.push({
        approverType: 6003,
        ruleApprovalNodeOID,
        name: item.name,
        approverEntityOID: item.userGroupOID
      })
    });
    this.handleAddApprover(params)
  };

  //添加审批人
  handleAddApprover = (params) => {
    let { approveUser, approveUserGroup, defaultApproveUserOID, defaultApproveUserGroupOID } = this.state;
    if (params.length) {
      workflowService.createApprovers(params).then(res => {
        res.data && res.data.map(item => {
          if (item.approverType === 6001) {
            approveUser.map((userItem, index) => {
              userItem.userOID === item.approverEntityOID && (approveUser[index].ruleApproverOID = item.ruleApproverOID)
            });
            defaultApproveUserOID.push(item.approverEntityOID)
          }
          if (item.approverType === 6003) {
            approveUserGroup.map((groupItem, index) => {
              groupItem.userGroupOID === item.approverEntityOID && (approveUserGroup[index].ruleApproverOID = item.ruleApproverOID)
            });
            defaultApproveUserGroupOID.push(item.approverEntityOID)
          }
        });
        this.setState({ defaultApproveUserOID, defaultApproveUserGroupOID });
        message.success(messages('common.operate.success'));
        this.setState({ loadingAddPerson: false });
        this.props.onSelect()
      })
    } else {
      this.setState({ loadingAddPerson: false });
      this.props.onSelect(this.state.approverNotChange)
    }
  };

  render() {
    const { visible, personType } = this.props;
    const {
      loading, userVisible, userGroupVisible, approveUser, approveUserGroup, depByApplicantKeys,departmentByParticipant, depByDeptKeys, departmentByParticipantKeys, costCenterKeys, costCenterDeptKeys,
      containsApportionmentDepartmentManager, containsApportionmentCostCenterManager, containsApportionmentCostCenterPrimaryDepartmentManager,
      directManager, accountBelongManager, participant, apiReturnApprover, costCenterApprover, costCenterDeptApprover, loadingAddPerson, departmentByLeader, departmentByBill
    } = this.state;
    return (
      <div className='add-person-modal'>
        <div className="select-person-modal-container"/>
        <Modal
          title={personType === 1 ? messages('setting.key1253'/*请选择审批人员*/) : messages('setting.key1254'/*请选择知会人员*/)}
          visible={visible}
          width={550}
          closable={false}
          getContainer={() => {
            return document.getElementsByClassName("select-person-modal-container")[0];
          }}
          footer={<Button type="primary" loading={loadingAddPerson}
                          onClick={this.handleOK}>{messages('common.ok')}</Button>}
        >
          <Spin spinning={loading}>
            <List itemLayout="horizontal">
              <ListItem className="dep-by-applicant">
                <h4>
                  {personType === 1 ? messages('setting.key1255'/*按申请人所在的组织架构审批*/) :
                    messages('setting.key1256'/*按申请人所在的组织架构知会*/)}
                </h4>
                <TagSelect value={depByApplicantKeys} onChange={value => this.setState({ depByApplicantKeys: value })}>
                  {(departmentByLeader || []).map(item => (
                    <TagSelect.Option value={item.key} key={item.key}>{item.value}</TagSelect.Option>
                  ))}
                </TagSelect>
              </ListItem>
              <ListItem className="dep-by-bill">
                <div>
                  <h4>
                    {personType === 1 ? messages('setting.key1257'/*按单据上的组织架构审批*/) :
                      messages('setting.key1258'/*按单据上的组织架构知会*/)}
                  </h4>
                  <Checkbox checked={containsApportionmentDepartmentManager}
                            onChange={e => this.setState({ containsApportionmentDepartmentManager: e.target.checked })}>
                    {personType === 1 ? messages('setting.key1259'/*分摊组织领导会签*/) :
                      messages('setting.key1260'/*知会分摊组织领导*/)}
                  </Checkbox>
                </div>

                <TagSelect value={depByDeptKeys} onChange={value => this.setState({ depByDeptKeys: value })}>
                  {(departmentByBill || []).map(item => (
                    <TagSelect.Option value={item.key} key={item.key}>{item.value}</TagSelect.Option>
                  ))}
                </TagSelect>
              </ListItem>
              {this.hasParticipant() && <ListItem className="dep-by-applicant">
                <h4>
                  {personType === 1 ? messages('setting.key1960')/*按参与人所在组织架构审批*/ : messages('setting.key1961')/*按参与人所在组织架构知会*/}
                </h4>
                <TagSelect value={departmentByParticipantKeys}
                           onChange={value => this.setState({ departmentByParticipantKeys: value })}>
                  {(departmentByParticipant || []).map(item => (
                    <TagSelect.Option value={item.key} key={item.key}>{item.value}</TagSelect.Option>
                  ))}
                </TagSelect>
              </ListItem>}
              {costCenterApprover && !!costCenterApprover.length && (
                <ListItem className="cost-center">
                  <div>
                    <h4>
                      {personType === 1 ? messages('setting.key1261'/*按单据上的成本中心经理审批*/) :
                        messages('setting.key1262'/*按单据上的成本中心经理知会*/)}
                    </h4>
                    <Checkbox checked={containsApportionmentCostCenterManager}
                              onChange={e => this.setState({ containsApportionmentCostCenterManager: e.target.checked })}>
                      {personType === 1 ? messages('setting.key1263'/*分摊成本中心经理会签*/) :
                        messages('setting.key1264'/*知会分摊成本中心经理*/)}
                    </Checkbox>
                  </div>
                  <TagSelect value={costCenterKeys} onChange={values => this.setState({ costCenterKeys: values })}>
                    {costCenterApprover.map(item => (
                      <TagSelect.Option value={item.approverEntityOID}
                                        key={item.approverEntityOID}>{item.value}</TagSelect.Option>
                    ))}
                  </TagSelect>
                </ListItem>
              )}
              {costCenterDeptApprover && !!costCenterDeptApprover.length && (
                <ListItem className="cost-center-dept">
                  <div>
                    <h4>
                      {personType === 1 ? messages('setting.key1265'/*按单据上的成本中心的主要部门经理审批*/) :
                        messages('setting.key1266'/*按单据上的成本中心的主要部门经理知会*/)}
                    </h4>
                    <Checkbox checked={containsApportionmentCostCenterPrimaryDepartmentManager}
                              onChange={e => this.setState({ containsApportionmentCostCenterPrimaryDepartmentManager: e.target.checked })}>
                      {personType === 1 ? messages('setting.key1267'/*分摊后，对应的部门经理会签*/) :
                        messages('setting.key1268'/*分摊后，知会对应的部门经理*/)}
                    </Checkbox>
                  </div>
                  <TagSelect value={costCenterDeptKeys}
                             onChange={values => this.setState({ costCenterDeptKeys: values })}>
                    {costCenterDeptApprover.map(item => (
                      <TagSelect.Option value={item.approverEntityOID}
                                        key={item.approverEntityOID}>{item.value}</TagSelect.Option>
                    ))}
                  </TagSelect>
                </ListItem>
              )}
              <ListItem className="direct-manager">
                <div>
                  <h4>{personType === 1 ? messages('setting.key1795')/*按以下人员信息中的【直属领导】审批*/ : messages('setting.key1796')/*按以下人员信息中的【直属领导】知会*/}</h4>
                </div>
                <Checkbox checked={directManager}
                          onChange={e => this.setState({ directManager: e.target.checked })}> {messages('setting.key1302')/*申请人*/}
                </Checkbox>
                {this.props.formInfo.formType && String(this.props.formInfo.formType).charAt(0) === '3'
                && (<Checkbox checked={accountBelongManager}
                              onChange={e => this.setState({ accountBelongManager: e.target.checked })}> {messages('setting.key1730')/*费用归属人*/}（{messages('setting.key1731')/*会签*/}）
                  </Checkbox>
                )}
                {this.hasParticipant() &&
                <Checkbox checked={participant} onChange={e => this.setState({ participant: e.target.checked })}> {messages('setting.key1923')/*参与人*/}（{messages('setting.key1731')/*会签*/}）
                </Checkbox>}
              </ListItem>
              <ListItem className="user-approver">
                <div>
                  <h4>
                    {personType === 1 ? messages('setting.key1273'/*指定人员审批*/) :
                      messages('setting.key1274'/*知会指定人员*/)}
                  </h4>
                  <a onClick={() => {this.setState({ userVisible: true })}}>
                    <Icon type="plus-circle"/> {messages('setting.key1275'/*选择人员*/)}
                  </a>
                </div>
                {approveUser && approveUser.map(item =>
                  <Tag key={item.userOID} closable
                       onClose={() => this.handleDeleteUser(item.userOID)}>{item.fullName}</Tag>
                )}
              </ListItem>
              <ListItem className="user-group-approver">
                <div>
                  <h4>
                    {personType === 1 ? messages('setting.key1276'/*指定人员组审批*/) :
                      messages('setting.key1277'/*知会指定组人员*/)}
                  </h4>
                  <a onClick={() => {this.setState({ userGroupVisible: true })}}>
                    <Icon type="plus-circle"/> {messages('setting.key1278'/*选择人员组*/)}
                  </a>
                </div>
                <div style={{ marginBottom: 5 }}>{messages('setting.key1279'/*只能引用到人员组中*/)}</div>
                {approveUserGroup && approveUserGroup.map(item =>
                  <Tag key={item.userGroupOID} closable
                       onClose={() => this.handleDeleteUserGroup(item.userGroupOID)}>{item.name}</Tag>
                )}
              </ListItem>
              <ListItem className="api-return-approver">
                <h4>
                  {personType === 1 ? messages('setting.key1280'/*接口返回审批人*/) :
                    messages('setting.key1281'/*接口返回知会人*/)}
                </h4>
                <Checkbox checked={apiReturnApprover}
                          onChange={e => this.setState({ apiReturnApprover: e.target.checked })}>
                  {personType === 1 ? messages('setting.key1282'/*当满足审批条件时，节点调用对应地址的接口，返回审批结果*/) :
                    messages('setting.key1283'/*当满足知会条件时，节点调用对应地址的接口，返回知会结果*/)}
                </Checkbox>
              </ListItem>
            </List>
          </Spin>
        </Modal>

        <ListSelector visible={userVisible}
                      type="user"
                      valueKey="userOID"
                      labelKey="fullName"
                      onlyNeed="userOID"
                      showDetail
                      extraParams={{ roleType: 'TENANT' }}
                      selectedData={approveUser}
                      onOk={this.handleAddUser}
                      onCancel={() => {this.setState({ userVisible: false })}}
        />
        <ListSelector visible={userGroupVisible}
                      type="user_group"
                      valueKey="userGroupOID"
                      labelKey="name"
                      selectedData={approveUserGroup}
                      onOk={this.handleAddUserGroup}
                      onCancel={() => {this.setState({ userGroupVisible: false })}}
        />
      </div>
    )
  }
}

AddPersonModal.propTypes = {
  visible: React.PropTypes.bool,
  personType: React.PropTypes.number, //1 审批，2 知会
  ruleApprovers: React.PropTypes.array,
  ruleApprovalNodeOID: React.PropTypes.string,
  formInfo: React.PropTypes.object,
  onSelect: React.PropTypes.func,
  onDelete: React.PropTypes.func,
};

AddPersonModal.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language,
  }
}

const wrappedAddPersonModal = Form.create()(AddPersonModal);

export default connect(mapStateToProps)(wrappedAddPersonModal)
